<template>
	<view 
	class="g-checkbox" 
	:style="{'width':'calc(100% /'+rowQuantity+')'}"
	:class="[Cpu_size]"
	>
		<view 
			@click="clickCheck" 
			class="g-checkbox-box" 
			:class="[Cpu_checkClass,Cpu_disabled]">{{label}}
		</view>
	</view>
</template>

<script>
import utils from "../../utils/utils.js"
export default {
	name:'g-empty',
	data() {
		return {
			parent_com:null,//父组件
			active:false,//是否被选中
			rowQuantity:0,//item宽度
			size:'',//尺寸
		};
	},
	props: {
		label:{
			type:String,
		},
		//传出value
		value:{
			type:String
		},
		disabled:{
			type:Boolean,
			default:false
		}
	},
	computed: {
		Cpu_checkClass(){
			if(this.active){
				return "g-checkbox-box-active"
			}else{
				return "g-checkbox-box-notActive"
			}
		},
		Cpu_size(){
			return `g-checkbox-${this.size}`
		},
		Cpu_disabled(){
			if(this.disabled){
				return `g-checkbox-box-disabled`
			}
		},
	},
	methods: {
		clickCheck(){
			if(this.disabled){
				//禁用状态下
				return 
			}
			if(this.parent_com.multiple){
				/**
				 * 多选状态下
				 */
				
				//视图处理
				this.active = !this.active
				//数据处理
				let clickIndex = this.parent_com.choicedVal.indexOf(this.value)
				if(clickIndex<0){
					//新增进去
					this.parent_com.choicedVal.push(this.value)
				}else{
					//如果里面有值，那么应该是删除当前选项
					this.parent_com.choicedVal.splice(clickIndex,1)
				}
			}else{
				/**
				 * 单选状态下重置所有的选项，仅保留已选中的
				 */
				this.parent_com.checksItems.forEach(item=>{
					item.active =false
				})
				this.active = true
				this.parent_com.choicedVal = this.value
			}
		},
		getParentVal(){
			//获取父组件val并回显,仅支持单选状态下
			if(this.parent_com.value==this.value){
				this.active = true
			}
		}
		
	},
	mounted(){
		//H5下有效
		this.parent_com = utils.findComponents("g-checker-group",this,"$parent")
		this.rowQuantity = this.parent_com.row
		this.size = this.parent_com.size
		this.getParentVal()
		//把子组件的实列传向如父组件丽
		this.parent_com.checksItems.push(this)
	},
	created() {
	}
};
</script>
<style scoped lang="scss">
	@import "../../theme.scss";
	.g-checkbox{
		display: flex;
		justify-content:center;
		align-items: center;
		margin: 10rpx 0;
		font-size: 28rpx;
		&-large{
			height: 80rpx;
		}
		&-middle{
			height: 60rpx;
		}
		&-mini{
			height: 48rpx;
		}
	}
	.g-checkbox-box{
		display: flex;
		justify-content:center;
		align-items: center;
		width: 88%;
		height: 100%;
		border-radius: 6rpx;
		font-weight: 400;
		transition: 0.2s;
		&-disabled{
			text-decoration:line-through;
			color: $g-text-dark !important;
		}
		&-active{
			background:$g-main-primary;
			color:$g-text-light;
		}
		&-notActive{
			background: $g-main-info;
			color: $g-text-darker;
		}
	}
</style>
